<!--
 * @Author: wrh123 482597539@qq.com
 * @Date: 2024-01-16 09:50:03
 * @LastEditors: wrh123 482597539@qq.com
 * @LastEditTime: 2024-01-25 17:27:25
 * @FilePath: /vue-admin/src/views/Profit/payList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="pay">

    <el-card shadow="never">
      <el-form label-width="80px" :inline="true">
        <el-form-item label="申请日期:">
          <el-date-picker v-model="value1" style="width: 220px;" size="mini" value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="-" start-placeholder="开始日期"
            end-placeholder="结束日期" @change="handleDateChange" popper-class="form-data-ccc" />
        </el-form-item>
        <el-form-item label="缴费人:">
          <el-input v-model="formPayList.userName" size="mini" />
        </el-form-item>

      </el-form>
      <el-form label-width="80px" :inline="true">
        <el-form-item label="账户类型:">
          <el-select v-model="formPayList.accountType" size="mini">
            <el-option label="全部" :value="null" />
            <el-option v-for="item in AccountType" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属阶段">
          <el-select v-model="formPayList.stage" size="mini">
            <el-option label="全部" :value="null" />
            <el-option v-for="item in PhaseList1" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="账户性质:">
          <el-select v-model="formPayList.accountSource" size="mini" placeholder="请选择平台">
            <el-option label="全部" value="0" />
            <el-option label="付费" value="1" />
            <el-option label="免费" value="2" />
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" size="mini" @click="subimit">查询</el-button>
          <el-button type="primary" size="mini" @click="updateBank">修改银行卡信息</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never" style="margin-top: 20px;">
      <el-table border :data="tableData" style="width: 100%">

        <el-table-column prop="timeOfPayment" align="center" label="缴费日期" width="160" />
        <el-table-column prop="tepy" align="center" label="账户类型">
          <template v-slot="{ row }">
            <span v-if="row.accountType === 0">外汇</span>
            <span v-if="row.accountType === 1">美股</span>
            <span v-if="row.accountType === 2">期货</span>
          </template>
        </el-table-column>
        <el-table-column prop="project" align="center" label="挑战项目">
          <template v-slot="{ row }">
            <span v-if="row.challengeProject === 0">评估</span>
            <span v-if="row.challengeProject === 1">即时</span>
            <span v-if="row.challengeProject === 2">固定</span>
            <span v-if="row.challengeProject === 3">比赛</span>
            <span v-if="row.challengeProject === 4">股票</span>
            <span v-if="row.challengeProject === 5">免费评估</span>
          </template>
        </el-table-column>
        <el-table-column prop="stage" align="center" label="所属阶段">
          <template v-slot="{ row }">
            <span v-if="row.stage === 0">资格评估</span>
            <span v-if="row.stage === 1">资质验证</span>
            <span v-if="row.stage === 2">合作</span>
            <span v-if="row.stage === 3">比赛</span>
          </template>
        </el-table-column>
        <el-table-column prop="accountMoney" align="center" label="账户规模" />
        <el-table-column prop="orderAmount" align="center" label="缴费金额" />
        <el-table-column prop="currencyOfPayment" align="center" label="缴费币种" />
        <el-table-column prop="couponCode" align="center" width="160" label="优惠卷">
          <template v-slot="{ row }">
            <span v-if="row.couponCode !== null">{{ row.couponCode }}</span>
            <span v-if="row.couponCode === null">未使用优惠卷</span>
          </template>
        </el-table-column>
        <el-table-column prop="accountNumber" align="center" width="160" label="交易账号" />
        <el-table-column prop="username" align="center" label="缴费人" />
        <el-table-column prop="emails" align="center" label="邮箱" width="180" />
        <el-table-column prop="paymentMethod" align="center" label="缴费方式" width="120">
          <template v-slot="{ row }">
            <span v-if="row.paymentMethod === 1">stripe</span>
            <span v-if="row.paymentMethod === 2">checkout</span>
            <span v-if="row.paymentMethod === 3">bankTransfer</span>
            <span v-if="row.paymentMethod === 4">cryptomus</span>
            <span v-if="row.paymentMethod === 5">confirmo</span>
          </template>

        </el-table-column>

        <el-table-column prop="paymentResult" align="center" width="150" label="缴费结果">
          <template v-slot="{ row }">
            <el-button v-if="row.paymentResult === 1" type="text" @click="delBtn(row)">未处理</el-button>
            <span v-if="row.paymentResult === 2">已缴费</span>
            <span v-if="row.paymentResult === 3">驳回</span>

          </template>
        </el-table-column>

        <!-- <el-table-column prop="paymentDisposeTime" align="center" width="140" label="缴费处理时间" />
        <el-table-column prop="paymentName" align="center" label="缴费操作人" width="100" />
        <el-table-column prop="paymentDisposeRemark" align="center" label="备注" /> -->
        <el-table-column align="center" label="详情">
          <template v-slot="{ row }">
            <el-button type="text" @click="rowClick(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align: right;margin-top: 10px" background layout="prev, pager, next" :page-size="formPayList.pageSize" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
      <addpayList :dialog-id="dialogId" :dialog-visible.sync="dialogVisible" @refresh="getPaymentListArr" />
      <el-dialog title="修改银行信息" :visible.sync="dialogFormVisible" width="30%" style="padding: 20px">
        <el-form :model="ruleForm" :rules="rules">
          <!--          <el-form-item label="金额" prop="amount" label-width="140px">-->
          <!--            <el-input v-model="ruleForm.amount" autocomplete="off" size="mini"></el-input>-->
          <!--          </el-form-item>-->
          <el-form-item label="银行账号" prop="bankAccountNumber" label-width="140px">
            <el-input v-model="ruleForm.bankAccountNumber" autocomplete="off" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="银行地址" prop="bankAddress" label-width="140px">
            <el-input v-model="ruleForm.bankAddress" autocomplete="off" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="银行名称" prop="bankName" label-width="140px">
            <el-input v-model="ruleForm.bankName" autocomplete="off" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="收款人姓名" prop="beneficiaryName" label-width="140px">
            <el-input v-model="ruleForm.beneficiaryName" autocomplete="off" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="bicSwift" prop="bicSwift" label-width="140px">
            <el-input v-model="ruleForm.bicSwift" autocomplete="off" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="国际银行账号" prop="iban" label-width="140px">
            <el-input v-model="ruleForm.iban" autocomplete="off" size="mini"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="submitUpdateBank" size="mini">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 详情弹窗 -->
      <el-dialog title="详情" :visible.sync="dialogFormVisibleText" width="30%" style="padding: 20px">
        <el-form :model="textForm">
          <el-form-item label="交易哈希:">
            <el-input v-model="textForm.transactionHash" size="mini" type="textarea"
              :autosize="{ minRows: 5, maxRows: 10 }" />
          </el-form-item>
          <el-form-item label="交易金额:">
            <el-input v-model="textForm.confirmResult" size="mini" />
          </el-form-item>
          <el-form-item label="交易币种:">
            <el-input v-model="textForm.confirmNetwork" size="mini" />
          </el-form-item>
          <el-form-item label="操作人:">
            <el-input v-model="textForm.paymentName" size="mini" />
          </el-form-item>
          <el-form-item label="处理时间:">
            <el-input v-model="textForm.paymentDisposeTime" size="mini" />
          </el-form-item>
          <el-form-item label="备注:">
            <el-input v-model="textForm.paymentDisposeRemark" size="mini" />
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import paging from '@/components/paging.vue'
import addpayList from './components/addpayList'
import { AccountType, arrPayment, PhaseList1, modifyTimeToEndOfDay } from '@/utils'
import { getAccountType } from '@/api/Tradingacct'
import { Bankinformation, getPaymentList, submitBank } from '@/api/Profit'

export default {
  name: 'VueAdminRefundList',
  components: {
    addpayList,
    paging
  },
  data() {
    return {
      value1: null,
      dialogVisible: false,
      dialogFormVisible: false,
      dialogFormVisibleText: false,
      tableData: [
        {
          paymentPlatform: 0,
          paymentResult: 1
        }
      ],

      total: 0,
      dialogId: {},
      formPayList: {
        beginTime: null,
        endTime: null,
        page: 1,
        pageSize: 10,
        stage: null,
        accountType: null,
        userName: null,
        // userIdList: [],
        // accountSource: null,
      },
      PhaseList: [],
      ruleForm: {
        amount: null, //金额
        bankAccountNumber: null, //银行账号
        bankAddress: null, // 银行地址
        bankName: null, // 银行名称
        beneficiaryName: null, // 收款人姓名
        bicSwift: null, // bicSwift
        iban: null, // 国际银行账号
      },
      rules: {
        amount: [{ required: true, message: '金额不可以为空', trigger: ['blur', 'change'] }],
        bankAccountNumber: [{ required: true, message: '银行账号不可以为空', trigger: ['blur', 'change'] }],
        bankAddress: [{ required: true, message: '银行地址不可以为空', trigger: ['blur', 'change'] }],
        bankName: [{ required: true, message: '银行名称不可以为空', trigger: ['blur', 'change'] }],
        beneficiaryName: [{ required: true, message: '收款人姓名不可以为空', trigger: ['blur', 'change'] }],
        bicSwift: [{ required: true, message: 'bicSwift不可以为空', trigger: ['blur', 'change'] }],
        iban: [{ required: true, message: '国际银行账号不可以为空', trigger: ['blur', 'change'] }],
      },
      textForm: {

      }
    }
  },
  computed: {
    arrPayment() {
      return arrPayment
    },
    PhaseList1() {
      return PhaseList1
    },
    AccountType() {
      return AccountType
    }
  },

  mounted() {
    this.getuseACCouyt()
    this.getPaymentListArr()
  },

  methods: {
    // 列表
    async getPaymentListArr() {
      const data = await getPaymentList(this.formPayList)
      this.tableData = data.records
      this.total = data.total
    },
    // 所属阶段
    // async getPhaseList() {
    //   const { data } = await getPhase()
    //   this.PhaseList = data
    // },
    handleDateChange() {
      if (this.value1 !== null) {
        this.value1[1] = modifyTimeToEndOfDay(this.value1[1])
        this.formPayList.beginTime = this.value1[0]
        this.formPayList.endTime = this.value1[1]
      } else {
        this.formPayList.beginTime = ''
        this.formPayList.endTime = ''
      }
    },
    async getuseACCouyt() {
      const data = await getAccountType()
      this.AccountType = data
    },
    // 查询
    subimit() {
      clearTimeout(this.timer) // 清理上一次的定时器
      this.timer = setTimeout(() => {
        this.formPayList.page = 1
        this.getPaymentListArr()
      }, 100)
    },
    // 未处理
    delBtn(row) {
      // handlePayment1
      // if (!id) return
      this.dialogId = row
      this.dialogVisible = true
    },

    // 后期要改
    handleSizeChange(val) {
      // console.log(val);
      this.formPayList.pageSize = val
      this.getPaymentListArr()
      // console.log(this.formPayList.pageSize);
      // 处理分页大小改变的逻辑
    },
    handleCurrentChange(val) {
      // console.log(val);
      this.formPayList.page = val
      this.getPaymentListArr()
      // 处理当前页码改变的逻辑
    },
    /**
     * @author 焦延龙 <19131965027@163.com>
     * @description  修改银行卡信息
     * @date 2024/3/18
     */
    async updateBank() {
      this.ruleForm = await Bankinformation()
      this.dialogFormVisible = true
    },
    /**
     * @author 焦延龙 <19131965027@163.com>
     * @description 确认修改银行卡信息
     * @date 2024/3/18
     */
    async submitUpdateBank() {
      await submitBank(this.ruleForm)
      this.dialogFormVisible = false
    },

    // 点击详情
    rowClick(row) {
      this.dialogFormVisibleText = true
      console.log(row)
      this.textForm.transactionHash = row.transactionHash
      this.textForm.confirmResult = row.confirmResult
      this.textForm.paymentDisposeRemark = row.paymentDisposeRemark
      this.textForm.paymentName = row.paymentName
      this.textForm.paymentDisposeTime = row.paymentDisposeTime
      this.textForm.confirmNetwork = row.confirmNetwork
    }
  }
}
</script>

<style lang="scss" scoped>
  @media (max-width:768px) {

  .el-form-item {
    display: flex;


  }
}
</style>
